브라우저 렌더링

#Browser 란?

웹 브라우저 또는 브라우저(browser)는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML문서나 파일을 출력하는 그래픽 사용자 인터페이스(GUI) 기반의 응용 소프트웨어이다.

대표적인 웹 브라우저로는 구글 크롬, 모질라 파이어폭스, 인터넷 익스플로러, 마이크로소프트 엣지, 오페라, 사파리 등이 있다.

여기서 설명하는 브라우저는 기본적으로 크롬, 파이어폭스, 사파리와 같은 오픈소스 브라우저( 모던 브라우저를 기본적으로 설명을 하게 된다.

#브라우저의 기본 구조

browser

  1. 사용자 인터페이스

    • 주소 표시줄, 이전/다음버튼, 북마크메뉴 등 요청한 페이지( document ) 를 제외한 부분이다

  2. 브라우저 엔진

    • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

  3. 렌더링 엔진

    • 요청한 콘텐츠를 표시한다. HTML 을 요청하면 HTML 과 CSS를 파싱하여 화면에 표시하는 역할

  4. 통신

    • HTTP 요청과 같은 네트워크 호출에 사용된다.
    • 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.

  5. UI 백엔드

    • 콤보박스와 같은 기본적인 장치를 그린다.
    • 플랫폼에서 명시하지 않은 일반적인 인터페이스로 OS 사용자 인터페이스 체계를 사용한다

  6. 자바스크립트 해석기

    • 자바스크립트 코드를 해석하고 실행하는 부분

  7. 자료 저장소

    • 자료를 저장하는 계층이다.

    • 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다

#렌더링

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.

하지만 주로 HTML, CSS 를 기본으로 렌더링하는 방식을 설명한다.

  • 웹킷 ( Webkit )

    • 사파리와 크롬에서 사용하는 렌더링 엔진

      -> 크롬은 Webkit에서 Fork 하여 Blink 라는 렌더링 엔진을 사용하고 있습니다.

    • 웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진

    • 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정하였다.

  • Gecko

    • 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용한다.

#동작 과정

  • Webkit

Webkit

  • Gecko

Gecko

약간의 용어 차이가 있지만 동작 과정은 기본적으로 동일하다고 생각하고 전체적인 렌더링 과정을 설명하겠습니다

#1. HTML 파싱 ( DOM 트리 형성 )

DOM

  • 기본적으로 토큰화, 트리 구축 크게 두 단계로 이루어져 파싱 알고리즘이 작동하게 된다
  • HTML 오류에 대한 브라우저의 유연한 파싱으로 필수적인 태그나 구조가 안맞는 트리에 대해서도 자동으로 맞춰 작동하게 됩니다.
  • 이러한 방식으로 DOM(문서 객체 모델, Document Object Model ) 트리를 생성하게 됩니다.

#2. CSS 파싱 ( CSSOM , CSS Object Model)

cssom

  • CSS rule 을 따라서 선택자와 선언을 매칭하게 되는 트리를 구축하게 됩니다

#3. 렌더 트리 구축 ( Attachment )

renderer

  • 표시해야 할 순서와 문서의 시작적인 구성요소로 올바른 순서로 내용을 그려낼 수 있도록 합니다.
  • 렌더트리(Renderer) 는 DOM 요소에 부합하지만 1:1 로 대응하지는 않습니다.
  • head 요소와 같이 비시각적 DOM 요소는 렌더트리에 추가 되지 않고, 흔히 사용하는 display:none 의 경우에도 렌더 트리에 나타나지 않습니다.

#4. Layout

  • 기기의 viewport 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산하는 과정을 Layout 이라고 합니다.

  • 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.

#5. Paint

  • 렌더 트리의 각 노드를 화면의 실제 픽셀로 나타내는 과정을 Painting 라고 합니다.
  • Painting 과정 후 브라우저 화면에 UI가 나타나게 됩니다.

#브라우저에서 주소창에 url 입력시 어떤일이 일어나는가

  1. 브라우저의 주소창에 url 입력
  2. 브라우저 캐시에서 DNS 레코드를 확인하여 IP주소를 찾음 (없다면 DNS resolver를 통해 IP주소를 알아냄)
  3. 브라우저가 서버와 TCP 연결을 시작함
  4. 브라우저가 웹 서버에 HTTP 요청을 보냄
  5. 서버가 요청을 처리하고 응답을 되돌려보냄
  6. 브라우저는 서버가 보낸 HTML 내용을 표시